<template>
  <div class="box-detail">
    <!-- <div class="barrages-drop">
      
    </div> -->
    

    <div class="page-nav-sub"></div>
    <!-- <vue-baberrage
class="barrages-drop"
:isShow="barrageIsShow"
:barrageList="barrageList"
:maxWordCount="maxWordCount"
:throttleGap="throttleGap"
:loop="barrageLoop"
:boxHeight="boxHeight"
:messageHeight="messageHeight"
>
</vue-baberrage> -->
    <div class="page-nav">
      <div class="page-nav-left" @click.stop="goBack">
        <span class="icon iconfont back">&#xe6dc;</span>
      </div>
      <div class="price-content">
        <img
          class="price-icon"
          src="/static/img/box/coins_y.png"
          draggable="false"
        />
        <div class="price-text">
          <span class="u-count-num">3.90</span>
        </div>
        <div class="price-add">
          <span class="icon iconfont add">&#xe6db;</span>
        </div>
      </div>
      <div class="guide-btn">
        <img
          class="guide-btn-icon"
          src="/static/img/box/guide.png"
          draggable="false"
        /><strong>Rules</strong>
      </div>
    </div>
    <div class="stage-content">
      <!-- <div
        class="box-cover"
        data-v-7db24670
        style="
          background-image: url('https://img.fcgbox.com/copy/box/115.webp');
          background-position: center center;
          background-size: contain;
          background-repeat: no-repeat;
        "
      ></div> -->
      <img class="box-cover" :src="data.img" draggable="false" />
      <!-- <img class="stage-img" src="/static/img/box/stage.png" draggable="false" /> -->
      <div
        class="stage-img"
        style="
          background-image: url(/static/img/box/stage.png);
          background-position: center center;
          background-size: contain;
          background-repeat: no-repeat;
        "
      ></div>
    </div>
    <div class="box-name">EXCLUSIVE</div>
    <div class="good-content">
      <div class="try-content"  @click.stop="goToIndexOneRes">
        <!----><img
       
          class="try-icon"
          src="/static/img/box/try.png"
          draggable="false"
        />
        <div class="try-text">TRY FOR FREE</div>
      </div>
      <div class="good-title">ITEMS IN THIS BOX</div>
      <div class="fair-text">
        <img
          class="fair-icon"
          src="/static/img/box/aq.png"
          draggable="false"
        />PROVABLY FAIR
      </div>
      <div class="good-list">
        <div
          class="good-item"
          v-for="(item, index) in data.goodsList"
          :key="index"
          @click.stop="ShowGoods(item)"
        >
          <div class="good-item-content level-5" :style="{ color: item.color }">
            <div class="rate-content">
              <img
                src="https://img.fcgbox.com/storage/thumbs/uploads/2021/11/12/1636710226718.png"
                alt=""
                class="good-quality-icon"
              /><span class="good-quality-text">{{ item.probability }}%</span>
            </div>
            <img class="good-cover" :src="'https://www.namele.com'+item.img" draggable="false" />
            <div class="u-line-2 good-name">
              {{ item.name }}
            </div>
            <div class="good-price">${{ item.price }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-row">
      <div class="bottom-row-btn" @click="showPop = true">
        Open for<span class="bottom-row-btn-price">${{ data.price }}</span>
      </div>
    </div>
    <div class="bottom-row-sub"></div>
    <!-- <Transition
            name="fade-slide"
            
      
    >
      <pup v-if="showPop"  style="animation-duration: 1s" :item="data" :showPop="showPop" @closePop="closePop"></pup>
      
    </Transition> -->
    <van-popup v-model="showPop">
      <pup :item="data" :showPop="showPop" @closePop="closePop"></pup
    ></van-popup>

    <!-- <x-show :show="showPop" :duration="2000" >
      <pup
      v-if="showPop"
        :item="data"
        :showPop="showPop"
        @closePop="closePop"
      ></pup>
    </x-show> -->

    <van-popup
      v-model="showGoods"
      closeable
      position="bottom"
      :style="{ height: '100%' }"
      ><goods :item="selectGoods"></goods
    ></van-popup>
  </div>
</template>

<script>
import pup from "./components/pup.vue";
import goods from "./components/goods.vue";
import { MESSAGE_TYPE } from "vue-baberrage";

export default {
  name: "box-Detail",
  components: {
    pup,
    goods,
  },
  data() {
    return {
      showPop: false,
      showGoods: false,
      data: {},
      selectGoods: {},

      msg: "马优晨就是个辣鸡~",
      barrageIsShow: true,
      messageHeight: 30,
      boxHeight: 250,
      barrageLoop: true,
      maxWordCount: 3,
      throttleGap: 5000,
      barrageList: [],
    };
  },
  mounted() {
    this.getData();
    this.addToList()
  },
  methods: {
    ShowGoods(item) {
      this.selectGoods = item;
      this.showGoods = true;
    },
    goBack() {
      this.$router.go(-1);
    },
    goToIndexOneRes(){
      
      this.$router.push({
              name:"indexOneRes",
              params:{goods:this.data.goodsList}
          })
    },
    closePop() {
      this.showPop = false;
    },
    getData() {
      this._showLoading();
      this.$http
        .get(`api/v1/box/${this.$route.query.id}`)
        .then(async (res) => {
          this._dismissLoading();
          if (res.data && res.data.isSuccess) {
            if (res.data.resultData.length) {
              this.data = res.data.resultData[0];
            }
          }
        })
        .catch((err) => {
          this._dismissLoading();
          this._showToast(err.message);
        });
    },
    addToList() {
        let ava =`https://img.fcgbox.com/storage/thumbs/uploads/2021/11/12/1636710226718.png`
      let list = [
        {
          id: 1,
          avatar:
          ava,
          msg: this.msg,
          time: 3,
          barrageStyle: "red",
        },
        {
          id: 2,
          avatar:
          ava,
          msg: this.msg,
          time: 8,
          barrageStyle: "green",
        },
        {
          id: 3,
          avatar:
          ava,
          msg: this.msg,
          time: 10,
          barrageStyle: "normal",
        },
        {
          id: 4,
          avatar:
          ava,
          msg: this.msg,
          time: 5,
          barrageStyle: "blue",
        },
       
      ];
      list.forEach((v) => {
        this.barrageList.push({
          id: v.id,
          avatar: v.avatar,
          msg: v.msg,
          time: v.time,
          type: MESSAGE_TYPE.NORMAL,
          barrageStyle: v.barrageStyle,
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: opacity 0.5s ease, transform 1s ease-in-out;
  transform: translateY(0px);
}

.fade-slide-enter-from,
.fade-slide-leave-to {
  opacity: 0;
  transform: translateY(100px);
}
@keyframes move-data-v-7db2467 {
  0% {
    -webkit-transform: translateX(-50%) translateY(-16px);
    transform: translateX(-50%) translateY(-16px);
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(11px);
    transform: translateX(-50%) translateY(11px);
  }
}
@keyframes scale-item-data-v-2bff2dce {
  0% {
    -webkit-transform: translate(-22px, -5px) scale(0.8) rotate(-10deg);
    transform: translate(-22px, -5px) scale(0.8) rotate(-10deg);
  }
  100% {
    -webkit-transform: translate(-22px, -5px) scale(1) rotate(-20deg);
    transform: translate(-22px, -5px) scale(1) rotate(-20deg);
  }
}
.box-detail {
  box-sizing: border-box;
  background-image: url(/static/img/box/top_bc_home.webp);
  background-attachment: fixed;
  .page-nav-sub {
    width: 100%;
    height: 48px;
    padding-top: calc(0px);
  }
  .page-nav {
    padding-top: calc(0px);
    height: 48px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--main-bc-opacity);
    -webkit-backdrop-filter: blur(11px);
    backdrop-filter: blur(11px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-right: 11px;
    .page-nav-left {
      width: 48px;
      height: 48px;
      display: flex;
      justify-content: center;
      align-items: center;
      .u-icon--right {
        flex-direction: row;
        align-items: center;
        font-size: 24px;
        line-height: 24px;
        font-weight: normal;
        top: 0px;
        color: rgb(51, 51, 51);
      }
      .back {
        font-size: 24px;
        font-weight: 700;
        color: var(--text-color);
      }
    }
    .price-content {
      border: 1px solid var(--price-border);
      margin-right: 11px;
      min-width: 176px;
      height: 36px;
      border-radius: 4px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-left: auto;
      .price-icon {
        width: 24px;
        height: 24px;
        margin-left: 5px;
        margin-right: 5px;
      }
      .price-text {
        font-size: 17px;
        font-weight: 700;
        color: #fcc62d;
      }
      .price-add {
        width: 29px;
        height: 29px;
        border-radius: 4px;
        margin-left: auto;
        margin-right: 3px;
        background: linear-gradient(98deg, #f48836, #f4364c 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        .add {
          color: #fff;
          font-size: 24px;
        }
      }
    }
    .guide-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--text-color);
      .guide-btn-icon {
        width: 30px;
        height: 30px;
        margin-right: 5px;
      }
    }
  }
  .stage-content {
    width: 414px;
    height: 276px;
    position: relative;
    .box-cover {
      width: 215px;
      height: 215px;
      position: absolute;
      left: 50%;
      top: -11px;
      -webkit-transform: translate(-50%);
      transform: translate(-50%);
      z-index: 2;
      /* -webkit-animation: move-data-v-7db24670 2s ease-in alternate infinite; */
      animation: move-data-v-7db2467 2s ease-in alternate infinite;
    }
    .stage-img {
      width: 331px;
      height: 88px;
      position: absolute;
      left: 50%;
      bottom: 0;
      -webkit-transform: translate(-50%);
      transform: translate(-50%);
    }
  }
  .box-name {
    width: 100%;
    padding: 0 16px;
    font-size: 24px;
    margin-bottom: 5px;
    box-sizing: border-box;
    font-weight: 700;
    text-align: left;
    background: linear-gradient(0deg, #f48836, #f4364c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
  }
  .good-content {
    width: 100%;
    background: var(--content-bc);
    padding: 16px 7px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    position: relative;
    margin-top: 11px;
    z-index: 9;
    .try-content {
      position: absolute;
      top: 35px;
      right: 11px;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .try-icon {
        width: 39px;
        // height: 39px;
      }
      .try-text {
        font-size: 13px;
        width: 110px;
        text-align: center;
        color: var(--text-color);
      }
    }
    .good-title {
      background: linear-gradient(0deg, #fae29a, var(--text-color));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight: 700;
      padding: 0 5px;
    }
    .fair-text {
      font-size: 13px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 0 5px;
      line-height: 1;
      color: #5c9e53;
      .fair-icon {
        width: 17px;
        height: 17px;
        margin-right: 3px;
      }
    }

    .good-list {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      margin-top: 11px;
      .good-item {
        width: 33.33%;
        padding: 5px;
        box-sizing: border-box;
        .level-5 {
          color: #ffc700;
        }
        .good-item-content {
          width: 100%;
          border-radius: 6px;
          background-color: var(--main-bc-color);
          border-radius: 4px;
          border-bottom: 4px solid;
          transition: all 0.3s ease-in-out;
          position: relative;
          .rate-content {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 5px;
            .good-quality-icon {
              width: 20px;
              height: 20px;
            }
            .good-quality-text {
              font-size: 13px;
              opacity: 0.9;
              margin-left: 5px;
              color: var(--text-color);
            }
          }

          .good-cover {
            width: 100%;
            height: 97px;
          }
          .good-price {
            width: 100%;
            height: 28px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 15px;
            font-weight: 300;
            background: hsla(0, 0%, 100%, 0.2);
          }
          .u-line-2 {
            display: -webkit-box !important;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical !important;
          }
          .good-name {
            width: 100%;
            height: 36px;
            box-sizing: border-box;
            padding: 0 8px;
            margin: 5px 0;
            font-size: 13px;
            color: var(--text-color);
          }
        }

        .good-item-content::after {
          content: "";
          display: block;
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 60px;
          -webkit-filter: blur(10px);
          filter: blur(10px);
          background: linear-gradient(180deg, currentColor, currentColor);
          opacity: 0.07;
          pointer-events: none;
          z-index: 2;
        }
      }
    }
  }
  .bottom-row {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 66px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--content-bc);
    z-index: 10;
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .bottom-row-btn {
      width: 380px;
      height: 48px;
      border-radius: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #3a83ed;
      color: #fff;
    }
    .bottom-row-btn-price {
      margin-left: 3px;
      font-weight: 700;
    }
  }
  .bottom-row-sub {
    width: 100%;
    height: 66px;
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style>

<style lang="scss" scoped>
.box-detail {
  .van-popup {
    background: transparent;
  }
}
</style>

<style lang="less">
.barrages-drop1 {
  .blue {
    border-radius: 100px;
    background: #e6ff75;
    color: #fff;
  }
  .green {
    border-radius: 100px;
    background: #75ffcd;
    color: #fff;
  }
  .red {
    border-radius: 100px;
    background: #e68fba;
    color: #fff;
  }
  .yellow {
    border-radius: 100px;
    background: #dfc795;
    color: #fff;
  }
  .baberrage-stage {
    position: absolute;
    width: 100%;
    height: 212px;
    overflow: hidden;
    top: 0;
    margin-top: 130px;
  }
}
.barrages-drop {
    // margin-top: 50px;
    z-index: 1000000;
    position: fixed !important;
} 
</style>